<template>
  <div>
    <el-input v-model="search"
              class="w-50 m-2"
              size="large"
              placeholder="输入搜索的文章"
              :suffix-icon="search"
              style="width:250px;margin-left:50px" />
    <el-table :data="checkessay"
              style="width: 100%">
      <el-table-column label="标题"
                       prop="title" />
      <el-table-column label="封面"
                       width="100">
        <template #default="props">
          <img :src="props.row.cover"
               width="40"
               height="40"
               alt="">
        </template>
      </el-table-column>
      <el-table-column label="内容"
                       prop="content"
                       style="height:40px" />
      <el-table-column label="发表日期"
                       width="180"
                       prop="createAt" />
      <el-table-column fixed="right"
                       label="Operations"
                       width="260">
        <template #default="scope">
          <el-button size="small"
                     @click="viewcur(scope.row.content)">查看文章内容</el-button>
          <el-button size="small"
                     @click="changestate(scope.row.id,1)">允许</el-button>
          <el-button size="small"
                     @click="changestate(scope.row.id,0)">不允许</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   style="width:200px;margin:10px auto"
                   layout="prev, pager, next"
                   :page-size="6"
                   v-model:current-page="start"
                   :total="total" />
  </div>
  <el-dialog v-model="dialogTableVisible"
             title="查看文章内容">
    <div class="content"
         style="overflow:auto;height:400px">
      <MdEditor previewOnly
                v-model="curessaycontent"></MdEditor>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import MdEditor from 'md-editor-v3'
import { formattime } from '@/utils'
import { allcheckeapi, changestateapi } from '@/apis/essay'
import { ElMessage } from 'element-plus'
import { defineComponent, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
interface essayinter {
  id: number
  content: string
  cover: string
  title: string
  createAt: string
}
export default defineComponent({
  name: 'v-review',
  components: { MdEditor },
  setup() {
    const router = useRouter()
    const checkessay = ref<essayinter[]>()
    const start = ref<number>(1)
    const search = ref<string>('')
    const total = ref<number>(0)
    const wsinstance = ref<WebSocket>()
    const dialogTableVisible = ref<boolean>(false)
    const curessaycontent = ref<string>('')
    onMounted(() => {
      wsinstance.value = new WebSocket(
        `ws://localhost:8000/ws/changestatenotice?myid=0`
      )
      allcheckefn()
    })
    watch([start, search], () => {
      allcheckefn()
    })
    //获取所有审核文章
    const allcheckefn = async () => {
      try {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const re: any = await allcheckeapi(
          (start.value - 1) * 6,
          6,
          search.value
        )
        checkessay.value = re.result.map((item: essayinter) => ({
          ...item,
          createAt: formattime(item.createAt),
        }))
        total.value = re.total
      } catch (e) {
        ElMessage.error('身份失效')
        router.push('/login')
      }
    }
    //通过审核或者不通过审核
    const changestate = async (id: number, state: number) => {
      try {
        await changestateapi(id, state)
        wsinstance.value?.send(JSON.stringify({ toid: '1' }))
        wsinstance.value?.send(JSON.stringify({ toid: '2' }))
        allcheckefn()
      } catch (e) {
        ElMessage.error('身份失效')
        router.push('/login')
      }
    }
    //查看文章内容
    const viewcur = (content: string) => {
      dialogTableVisible.value = true
      curessaycontent.value = content
    }
    return {
      checkessay,
      search,
      start,
      total,
      changestate,
      dialogTableVisible,
      curessaycontent,
      viewcur,
    }
  },
})
</script>

<style scoped lang="less">
:deep(.cell) {
  height: 45px;
}
</style>